.EnvironmentAppSidebar {
    .EnvironmentAppSidebar-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;

        .sidebar-content-main {
            display: flex;
            flex: 1;
            background-color: var(--bg-lightest);

            .sidebar-content-main-navigator {
                flex: 1;
                overflow: hidden;
                background-color: var(--bg-lightest);

                > div {
                    padding-top: var(--padding-sm);
                    padding-bottom: var(-padding-sm);
                }

                .QueryViewNavigator,
                .QuerySnippetNavigator {
                    height: 100%;
                }

                .navigator-header {
                    background-color: var(--bg-light);
                    border-radius: var(--border-radius-sm);
                    user-select: none;
                    cursor: pointer;

                    & + div {
                        margin-top: var(--margin-xs);
                    }
                }
            }
        }

        .collapse-sidebar-button {
            height: 35px;
            width: 25px;
            padding: 5px 0px;
            cursor: pointer;

            display: flex;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            left: 100%;

            z-index: 30;
            opacity: 0;
        }

        &:hover .collapse-sidebar-button {
            opacity: 0.4;
        }
        .collapse-sidebar-button:hover {
            opacity: 1;
        }
    }

    &:not(.collapsed) {
        .sidebar-content-main {
            overflow: hidden;
        }
    }

    &.collapsed {
        .sidebar-environment-picker {
            text-align: center;
            height: 50px;
            .collapsed-env {
                padding: var(--padding-sm);
            }
        }

        .EnvironmentAppSidebar-content {
            background-color: var(--bg-lightest);
            .EntitySidebar {
                background-color: var(--bg-lightest);
            }
        }
    }

    .env-icon {
        font-size: var(--xxxsmall-text-size);
        font-family: var(--font-monospace);
        background-color: var(--bg-light);
        color: var(--text);
        border-radius: var(--border-radius-sm);
        transition: background-color 0.3s ease-out;
        user-select: none;

        display: inline-flex;
        justify-content: center;
        align-items: center;

        width: 36px;
        height: 36px;
        padding: 2px;

        &.selected {
            font-weight: var(--bold-font);
            color: var(--color-accent-dark);
            background-color: var(--color-accent-lightest-0);
        }

        &.disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .env-icon-text {
            word-break: break-all;
            text-align: center;
        }
    }
}

.SidebarNavigator {
    display: flex;
    flex-direction: column;

    .list-header {
        background: var(--bg-light);
        margin-bottom: var(--margin-sm);
        border-radius: var(--border-radius-sm);
        overflow: hidden;
        margin-left: var(--margin-sm);
        margin-right: 16px; // match scrollbar width

        &:hover {
            background-color: var(--bg-hover);
        }
    }

    .list-content {
        flex: 1;
        overflow-y: scroll;
        padding-left: var(--padding);
        padding-right: 0px;

        display: flex;
        flex-direction: column;
    }

    .empty-section-message {
        text-align: center;
        font-size: var(--large-text-size);
        font-weight: var(--extra-bold-font);
        font-family: var(--font-accent);
        padding: var(--padding-lg);
        color: var(--text-lightest-0);
        user-select: none;
    }
}
